import {
  Table,
  Row,
  Col,
  Form,
  Input,
  Icon,
  InputNumber,
  Radio,
  DatePicker,
  Select,
  Upload,
  Button,
  Switch,
  Modal,
  Popconfirm,
  Tabs,
  message,
  Steps,
} from 'antd';

import { FormComponentProps } from 'antd/es/form';
import React from 'react';
import SingleDragger from '../../../../../components/Commons/SingleDragger';
import { connect } from 'dva';
import Constants from '@/utils/Constants';

const R = require('ramda');
const FormItem = Form.Item;

const createForm = Form.create()(
  class CreateForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        open: false,
      };
    }

    handleConfirm = prePros => {
      let url = this.refs.unapprovalfile.getUrl();
      if (R.isNil(url) || R.isEmpty(url)) {
        message.error('请先上传待审核单证');
        return;
      }

      this.props.form.validateFields((errors, values) => {
        if (errors) return;

        values.unapprovalfile = url;
        this.props.dispatch({
          type: 'credit/apply',
          payload: {
            ...values,
            onSuccess: () => {
              prePros.refreshList(prePros);
            },
          },
        });
        this.handleCancel();
      });
    };

    handleOpen = () => {
      this.setState({ open: true });
    };

    handleCancel = () => {
      this.props.form.resetFields();
      if (this.refs.unapprovalfile) this.refs.unapprovalfile.resetUpload();
      this.setState({ open: false });
    };

    render() {
      const { getFieldDecorator } = this.props.form;
      const formItemLayout = { labelCol: { sm: { span: 8 } }, wrapperCol: { sm: { span: 14 } } };

      let footer = [];
      footer.push(
        <Button key="cancel" size="large" onClick={this.handleCancel.bind(this)}>
          取消
        </Button>,
      );
      footer.push(
        <Button
          key="submit"
          size="large"
          loading={this.props.loading}
          onClick={this.handleConfirm.bind(this, this.props)}
        >
          确认
        </Button>,
      );

      return (
        <Modal
          destroyOnClose
          title="立即申请"
          visible={this.state.open}
          footer={footer}
          width={800}
          onCancel={this.handleCancel}
        >
          <Form>
            <Row>
              <Col span={12}>
                <FormItem {...formItemLayout} label="联系人手机号" hasFeedback>
                  {getFieldDecorator('mobile', {
                    rules: [{ required: true, message: '请输入联系人手机号！' }],
                    initialValue: '',
                  })(<Input maxLength="15" />)}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label="联系人邮箱" hasFeedback>
                  {getFieldDecorator('email', {
                    rules: [
                      {
                        required: true,
                        message: '请输入联系人邮箱！',
                      },
                    ],
                    initialValue: '',
                  })(<Input maxLength="30" />)}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <FormItem {...formItemLayout} label="服务类型" hasFeedback>
                  {getFieldDecorator('serviceType', {
                    rules: [{ required: true, message: '请选择服务类型！' }],
                    initialValue: '',
                  })(
                    <Select>
                      <Select.Option value="8">审单(￥300)</Select.Option>
                      <Select.Option value="9">制单(￥500)</Select.Option>
                    </Select>,
                  )}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label="附件(待审核单证)" hasFeedback>
                  <SingleDragger
                    ref="unapprovalfile"
                    url={''}
                    dataSource={''}
                    module={'qianzhuang'}
                  />
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Modal>
      );
    }
  },
);

function mapStateToProps(state) {
  return {
    loading: state.loading.models.credit,
  };
}

export default connect(mapStateToProps)(createForm);
